<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻分类-牛马新闻网</title>
<style type="text/css">
        .type{
            width: 91%;
            margin: 0 auto;
        }
        .news_type{
            text-align: center;
            width: 14%;
            height: 60px;
            line-height: 60px;
            display:inline-block;
            background-color: lightgray;
            cursor: pointer;
        }
        .news_type:hover{
            background-color: lightyellow;
        }
        .News_list
        {
            border: linen 5px solid;
            border-radius: 25px;
            width: 90%;
            margin: 0 auto;
            margin-top: 50px;
            padding: 20px;
            background-color: white;

        }
        .News_list table
        {
            table-layout: fixed;
            width: 100%;
            margin: 0 auto;
        }
        #tr1
        {
            height: 40px;
            text-align: center;
            background-color: lightgray;
        }
        .News_list tr
        {

            margin: 0;
            padding: 0;
            border: 0;
            height: 40px;
        }

        .News_list td
        {
            margin: 0;
            padding: 0;
            border: 0;
            border-bottom: aliceblue 1px solid;
        }
        .news-title
        {
            width: 30%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor:pointer;
        }
    </style>
</head>
<body>
<%@ include file="Header.jsp" %>
    <div id="type_body" style="margin-top:25px">
        <div class="type">
            <span class="news_type" onclick="ChangeType(this)">政治新闻</span>
            <span class="news_type" onclick="ChangeType(this)">社会新闻</span>
            <span class="news_type" onclick="ChangeType(this)">体育新闻</span>
            <span class="news_type" onclick="ChangeType(this)">文教新闻</span>
            <span class="news_type" onclick="ChangeType(this)">科技新闻</span>
            <span class="news_type" onclick="ChangeType(this)">军事新闻</span>
            <span class="news_type" onclick="ChangeType(this)">法律新闻</span>
        </div>
        <div id="News_list" class="News_list">
            <table id="table1">
            <tr id="tr1">
            <td class="news-title">标题</td><td>作者</td><td>类型</td><td>时间</td>
            </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript">
    function ajaxFunction() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
    } catch (e) {
    try {// Internet Explorer
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
    }
    }
    }
    return xmlHttp;
    }
    // 创建AJAX
    function Onloading() {
    var sql="Select * from newsdetail  INNER JOIN types on newsdetail.type = types.tid  order by time desc";
    var request = ajaxFunction();
    // 2 发送请求 参数1:选择发送方式  参数2:发送地址(这里发送给一个Servlet)  参数3:是否异步传输(一般为true)
    request.open("POST", "./../GMS", true);			//全部新闻
    // 3 获取请求响应数据 注册监听  状态如果发生变化 会执行等号右边的函数
    request.onreadystatechange = function() {
    //前半段表示 已经能够正常处理。  再判断状态码是否是200
    if (request.readyState == 4 && request.status == 200) {
    //弹出响应的信息
    var test = eval("("+request.responseText+")");
    var news ="<tr id=\"tr1\">" +
    "<td class=\"news-title\"  style=\"color:black;\">标题</td><td>作者</td><td>类型</td><td>时间</td>" +
    "</tr>";
    for(var i=0;i<test.length;i++){
    news+='<tr><td class=\"news-title\" onclick="GO(this)">'+test[i].title+'</td><td>'+test[i].author+'</td><td>'+test[i].tname+'</td><td>'+test[i].time+'</td></tr>';
    console.log('<tr><td class=\"news-title\">'+test[i].title+'</td><td>'+test[i].author+'</td><td>'+test[i].tname+'</td><td>'+test[i].time+'</td></tr>');
    }
    document.getElementById("table1").innerHTML=news;
    GYS(test.length);
    }
    }
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send("sql="+sql);
    }
    Onloading();
    </script>
    <!-- 获取数据 -->
    <script type="text/javascript">
    function GYS(k){
    var NTitle = document.getElementsByClassName('news-title');
    for(var i=1;i<=k;i++){
    NTitle[i].onmousedown=function () {
    this.style.color='red';
    }
    NTitle[i].onmouseup=function () {
    this.style.color='blue';
    }
    }
    }
    </script>
    <!--更改字体颜色-->
    <script type="text/javascript">
    function GO(nT) {
    window.localStorage.setItem("title",nT.innerHTML);
    window.location="../PAGES/News_detail.jsp";
    }
    </script>
    <!--新闻标题点击事件-->
    <script type="text/javascript">
    function ChangeType(type) {
        var sql="Select * from newsdetail  INNER JOIN types on newsdetail.type = types.tid where Tname = '"+type.innerHTML+"'order by time desc" ;
        var request = ajaxFunction();
        // 2 发送请求 参数1:选择发送方式  参数2:发送地址(这里发送给一个Servlet)  参数3:是否异步传输(一般为true)
        request.open("POST", "./../GMS", true);			//全部新闻
        // 3 获取请求响应数据 注册监听  状态如果发生变化 会执行等号右边的函数
        request.onreadystatechange = function() {
        //前半段表示 已经能够正常处理。  再判断状态码是否是200
        if (request.readyState == 4 && request.status == 200) {
        //弹出响应的信息
            var test = eval("("+request.responseText+")");
            var news ="<tr id=\"tr1\">" +
            "<td class=\"news-title\"  style=\"color:black;\">标题</td><td>作者</td><td>类型</td><td>时间</td>" +
            "</tr>";
            for(var i=0;i<test.length;i++){
                news+='<tr><td class=\"news-title\" onclick="GO(this)">'+test[i].title+'</td><td>'+test[i].author+'</td><td>'+test[i].tname+'</td><td>'+test[i].time+'</td></tr>';
                console.log('<tr><td class=\"news-title\">'+test[i].title+'</td><td>'+test[i].author+'</td><td>'+test[i].tname+'</td><td>'+test[i].time+'</td></tr>');
            }
            document.getElementById("table1").innerHTML=news;
            GYS(test.length);
            }
        }
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send("sql="+sql);
    }
    </script>
    </body>
</html>